<template>
  <afl-loading
    v-if="ready"
    :width="50"
    :height="50"
    class="afl-loading"
    :tip-style="{ fontSize: '16px' }"
  >
    Loading...
  </afl-loading>
  <ScaleBox
    :width="1920"
    :height="1080"
    bgc="transparent"
    :delay="100"
    v-else
    class="roc-scale-box container"
  >
    <div class="first-box">
      <div class="currentCard">
        <div class="card-header">
          <span style="font-weight: bold;font-size: 18px">当前任务统计</span>
        </div>
        <div class="card-content">
          <span style="font-size: 60px">{{ unFinishTotal }}</span>
          <p>当前未完成总数</p>
        </div>
        <div class="card-bottom">
          <v-chart ref="currentRef"></v-chart>
        </div>
      </div>
      <historyCard class="historyCard"></historyCard>
    </div>
    <div class="second-box">
      <statsCard></statsCard>
      <percentage></percentage>
      <electricity></electricity>
    </div>
  </ScaleBox>
</template>
<script setup>
import { onMounted, reactive, ref, watchEffect } from "vue";
import historyCard from "./historyCard.vue";
import statsCard from "./statsCard.vue";
import percentage from "./percentage.vue";
import electricity from "./electricity.vue";
import * as echarts from "echarts";
import useI18n from "@/hooks/language";
const { t } = useI18n();

const currentRef = ref(null);

const renderCurrentOption = () => {
  return {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "90%",
      left: "center",
    },
    series: [
      {
        name: "任务状态",
        type: "pie",
        radius: ["30%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "18",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 50, name: "执行中", itemStyle: { color: "#409eff" } },
          { value: 50, name: "待执行", itemStyle: { color: "#f1b340" } },
        ],
      },
    ],
  };
};
const unFinishTotal = ref(0); // 未完成总数
const ready = ref(false);

onMounted(() => {
  currentRef.value.setOption(renderCurrentOption());
  window.addEventListener("resize",()=>currentRef?.value.resize())
});
watchEffect(() => {
  if (currentRef.value) {
    currentRef.value.resize();
  }
});
</script>

<style scoped lang="scss">
@forward "index";
</style>
